<template>
  <KView class="coupon-page">
    <coupon-bg-view has-footer @to-back="toBack" @search-data="toSearchData" @my-coupon="lookMyCoupon">
      <template v-if="isShow">
        <classify-tab :classify-list="couponClassifyList" :select-tab.sync="selectTab" @change="toSearchClassifyData"></classify-tab>
        <KView class="coupon-page-list" :key="showTab">
          <template v-if="couponList.length>0">
            <coupon-data-view :coupon-list="couponList" :pagination="pagination" :next-data-fun="setCouponList"></coupon-data-view>
          </template>
          <KView v-else class="coupon-page-nodata flex-central">
            <span>暂无优惠券</span>
          </KView>
        </KView>
      </template>
    </coupon-bg-view>
  </KView>
</template>

<script>
  import SystemUtil from 'utils/systemUtil';
  import Pagination from 'models/pagination';
  import CouponApi from 'services/couponApi';
  import storeMixins from 'mixins/storeMixins';

  import CouponBgView from 'views/couponPage/components/couponBgView';
  import ClassifyTab from 'views/couponPage/components/classifyTab';
  import CouponDataView from './couponDataView';

  export default {
    mixins: [storeMixins],

    props: {
      hasBack: {
        type: Boolean,
        default: true
      }
    },

    data() {
      return {
        isShow: false,
        isMiniprogram: process.env.isMiniprogram,
        couponClassifyList: [],
        selectTab: null,
        showTab: '',
        couponList: [],
        pagination: null
      };
    },

    created() {
      SystemUtil.showLoading('');
      let pagination = new Pagination(20);
      this.setCouponClassifyList().then(couponClassifyList => {
        this.selectTab = couponClassifyList[0];
        return this.setCouponList(true, pagination).then(() => {
          this.pagination = pagination;
          this.isShow = true;
          SystemUtil.hideLoading();
        });
      }).catch(() => {
        SystemUtil.hideLoading();
      });
    },

    methods: {
      setCouponClassifyList() {
        return CouponApi.getCouponClassifyList().then(couponClassifyList => {
          this.couponClassifyList = couponClassifyList;
          return couponClassifyList;
        });
      },

      setCouponList(isInit = false, pagination = null) {
        if (pagination === null) {
          pagination = this.pagination;
        }

        let selectTabId = this.selectTab.id;
        return CouponApi.getCouponData(selectTabId, this.location.lnglat, pagination).then(couponList => {
          if (isInit) {
            this.couponList = couponList;
          } else {
            this.couponList.push(...couponList);
          }

          if (this.showTab !== selectTabId) {
            this.showTab = selectTabId;
          }
          return couponList;
        });
      },

      toSearchClassifyData() {
        let pagination = new Pagination(20);
        SystemUtil.showLoading('');
        this.setCouponList(true, pagination).then(() => {
          this.pagination = pagination;
          SystemUtil.hideLoading();
        }).catch(() => {
          SystemUtil.hideLoading();
        });
      },

      toSearchData() {
        let url = '/couponSearchPage';
        if (this.isMiniprogram) {
          window.open(url);
        }
      },

      lookMyCoupon() {
        let url = '/myCouponPage';
        if (this.isMiniprogram) {
          window.open(url);
        }
      },

      resetCoupon(coupon) {
        let couponList = this.couponList;
        let index = null;
        for (let i = 0; i < couponList.length; i++) {
          let couponData = couponList[i];
          if (couponData.id === coupon.id) {
            index = i;
            break;
          }
        }

        if (index !== null) {
          couponList.splice(index, 1, coupon);
        }
      },

      toBack() {
        if (!this.isMiniprogram) {
          window.history.back();
          return;
        }

        if (this.hasBack) {
          wx.navigateBack();
        } else {
          this.$emit('to-page', '/home');
        }
      }
    },

    components: {
      CouponBgView,
      ClassifyTab,
      CouponDataView
    }
  };

</script>

<style lang="scss">
  .coupon-page {
    height: 100%;

    .coupon-page-list {
      height: calc(100% - #{formatPx(100)});
      padding-top: formatPx(40);
      overflow: auto;

      .coupon-page-nodata {
        height: 100%;
        color: #999999;
        font-size: formatPx(50);
      }
    }
  }

</style>
